<template>
    <ZwSearchForm :option="searchOption" @search="search" @reset="reset" @expand="getTableH" />
    <ZwTable
        ref="tableRef"
        class="table-box"
        :option="tableOption"
        :fetch-params="state.searchParams"
        :fetch-api="fetchApi()"></ZwTable>
</template>
<script setup lang="tsx">
import { reactive, ref, computed, nextTick, onMounted } from 'vue';
import ZwTable from '@/components/zw/table/Table';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import { deepCopy } from '@/utils/helper';
import { getPointsRecord, getMemberChannelList } from '@/api/member/memberList/index';
import { getBusinessType } from '@/api/member/pointsManage/index';
import { getWiseManList } from '@/api/ecommerce/wiseManList';

const props = defineProps(['member_no']);
const defaultParams = {
    member_no: props.member_no,
    business_type: '',
    shop_name: '',
    shop_id: '',
    channel_id: '',
    daren_openid: '0',
    record_time: [], // 变更日期
    remark: '' //备注
};

const state = reactive({
    searchParams: deepCopy(defaultParams)
});

// const search = (data: any) => {
//     state.searchParams = deepCopy({ ...defaultParams, ...data });
// };

// const reset = () => {
//     state.searchParams = deepCopy({ ...defaultParams });
// };

const getTableH = () => {
    nextTick(() => {
        tableRef.value.getTableH();
    });
};
// 列表搜索 of start

const searchOption = computed(() => {
    return [
        {
            label: '更新时间',
            name: 'record_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
        },
        {
            label: '类型',
            name: 'business_type',
            value: '',
            type: 'select',
            clearable: true,
            placeholder: '请选择类型',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    getBusinessType().then((res: any) => {
                        let list: any = [];
                        const data = res.map((v: any) => {
                            return {
                                id: v.val,
                                name: v.name
                            };
                        });
                        list = data || [];
                        resolve(list);
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '来源渠道',
            name: 'channel_id',
            value: '',
            type: 'select',
            clearable: true,
            placeholder: '请选择来源渠道',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    getMemberChannelList().then((res: any) => {
                        let list: any = [];
                        const data = res.map((v: any) => {
                            return {
                                id: v.id,
                                name: v.name
                            };
                        });
                        list = data || [];
                        resolve(list);
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '来源店铺',
            name: 'shop_id',
            value: [],
            type: 'select',
            placeholder: '请选择店铺',
            popperClass: 'zw-hide_select_option',
            isStoreSelect: true,
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '备注',
            name: 'remark',
            type: 'input',
            clearable: true,
            placeholder: '请输入备注',
            maxlength: 50
        },
        {
            label: '来源达人',
            name: 'daren_openid',
            value: '',
            type: 'select',
            clearable: true,
            placeholder: '全部',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    getWiseManList({ auth_status: [2, 3], page: 1, page_size: 999 }).then((res: any) => {
                        const targetArr: any = [];
                        res?.data?.forEach((item: any) => {
                            targetArr.push(item);
                        });
                        resolve(targetArr);
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.daren_name,
                value: v.daren_openid
            })
        }
    ];
});

// 列表搜索 of end
const tableRef = ref<any>(null);
const tableOption = [
    {
        prop: 'created_at',
        label: '更新时间',
        width: 170,
        render({ row, column, index }: any) {
            return <div>{row.created_at || '--'}</div>;
        }
    },
    {
        prop: 'business_type_name',
        label: '类型',
        width: 110,
        render({ row, column, index }: any) {
            return <div>{row.business_type_name || '--'}</div>;
        }
    },
    {
        prop: 'business_sub_name',
        label: '名称',
        width: 110,
        render({ row, column, index }: any) {
            return <div>{row.business_sub_name || '--'}</div>;
        }
    },
    {
        prop: 'change_points',
        label: '变动值',
        width: 100,
        render({ row, column, index }: any) {
            return (
                <div>
                    {' '}
                    {row.change_type == 1 ? '+' : '-'} {row.change_points}
                </div>
            );
        }
    },
    {
        prop: 'channel_name',
        label: '来源渠道',
        width: 100,
        render({ row, column, index }: any) {
            return <div>{row.channel_name || '--'}</div>;
        }
    },
    {
        prop: 'shop_name',
        label: '来源店铺/达人',
        width: 130,
        render({ row, column, index }: any) {
            const isShop = row.source_type == 1;
            const src = `/static/member/${isShop ? 'shop' : 'member'}-icon-small.png`;
            const name = isShop ? row.shop_name : row.daren_name;
            return (
                <div style="display: flex;align-items:center;">
                    <el-image
                        style="display: inline-block;width: 16px; height: 16px;margin-right: 4px;"
                        v-show={name && name !== '--'}
                        src={src}></el-image>
                    {name || '--'}
                </div>
            );
        }
    },
    {
        prop: 'remark',
        label: '备注',
        minWidth: 120,
        render({ row, column, index }: any) {
            return <elPopoverTips content={row.remark} />;
        }
    },
    {
        prop: 'created_user',
        label: '变更人',
        width: 120,
        render({ row, column, index }: any) {
            return <div>{row.created_user || '--'}</div>;
        }
    }
];

const search = (data: any) => {
    const member_no = state.searchParams.member_no;
    // tableRef.value.getTable().clearSelection();
    state.searchParams = deepCopy({ ...defaultParams, ...data, member_no });
};

const reset = () => {
    const member_no = state.searchParams.member_no;
    // tableRef.value.getTable().clearSelection();
    state.searchParams = deepCopy({ ...defaultParams, member_no });
};

const fetchApi = () => {
    getTableH();
    return getPointsRecord;
};
</script>
